var MaskType = cc.Enum({
    default: 1,   //普通显示模式  不做任何处理
    rubOut: 2,   //擦除模式  暂时仅支持circle    TODO
});
var FormType = cc.Enum({
    circle: 1,   //圆形
    cube: 2,   //矩形
    ellipse:3,   //椭圆
});
/** 遮照刷新脚本 */
const { ccclass, property, executeInEditMode } = cc._decorator;
@ccclass
export default class MaskItem extends cc.Component {
    @property({ type: cc.Enum(MaskType), displayName: "遮罩模式" })
    sType: number = MaskType.default;
    @property({ type: cc.Enum(FormType), displayName: "遮罩形状" })
    fType: number = FormType.circle;
    @property({ type: cc.Float, displayName: "遮罩显示半径/宽度" })
    maskLen: number = 100;
    @property({ type: cc.Float, displayName: "遮罩显示高度", visible: function () { return this.fType == FormType.cube || this.fType == FormType.ellipse; } })
    maskHeight: number = 50;
    @property({ type: cc.Mask, displayName: "遮罩組件" })
    rubMask: cc.Mask = null;
    @property({ displayName: "是否每次清除之前的遮罩" })
    isClear: boolean = false;

    @property({ type: cc.Node, displayName: "要擦出的节点", visible: function () { return this.sType == MaskType.rubOut; } })
    rubNode: cc.Node = null;
    @property({ type: cc.Float, min: 0.01, max: 1, displayName: "超过百分之多少就通过", visible: function () { return this.sType == MaskType.rubOut; } })
    winNum: number = 0.9;
    @property({ type: cc.Float, displayName: "目标节点按多少像素分割", visible: function () { return this.sType == MaskType.rubOut; } })
    mapWidth: number = 5;    //多少像素分割

    pointArr: Array<Array<number>> = [];   //像素级分割地图
    isWinRub: boolean = false;      //擦出是否通过
    onLoad() {
        this.isWinRub = false;

        if (this.sType === MaskType.rubOut) {
            this.initPointArr();
        }
    }
    /** 初始化擦出像素点 */
    initPointArr() {
        for (let i = 0; i < Math.floor(this.rubNode.width / this.mapWidth); i++) {
            let tempArr = [];
            for (let j = 0; j < Math.floor(this.rubNode.height / this.mapWidth); j++) {
                tempArr.push(1);
            }
            this.pointArr.push(tempArr);
        }
    };
    /** 刷新擦除 */
    updateRubOut(worldPos: cc.Vec2) {
        if (!this.rubMask) { return; }
        if (this.isClear) {
            // @ts-ignore
            this.rubMask._graphics.clear();
        }
        let pos = this.rubMask.node.convertToNodeSpaceAR(worldPos);
        this.updateRubMask(this.rubMask, pos );

        if (!this.rubNode || this.sType != MaskType.rubOut) { return; }
        this.setMapState(worldPos, this.maskLen);
    };
    // // start() {
    // // }
    /** 是否完成擦出 */
    isFinishRub() {
        if (this.isWinRub) { return; }
        let tempNum = 0;
        for (let i = 0; i < this.pointArr.length; i++) {
            for (let j = 0; j < this.pointArr[i].length; j++) {
                if (this.pointArr[i][j] == 0) {
                    tempNum++;
                }
            }
        }
        if (tempNum >= this.pointArr.length * this.pointArr[0].length * this.winNum) {
            this.isWinRub = true;
        }
    };
    /** 将圆形范围内的  像素点 改为 已经消除状态 */
    setMapState(worldPos: cc.Vec2, cirLen: number, state: number = 0) {
        if (this.isWinRub) { return; }
        let nodePos = this.rubNode.convertToNodeSpaceAR(worldPos)
        for (let i = 0; i < this.pointArr.length; i++) {
            for (let j = 0; j < this.pointArr[i].length; j++) {
                if (this.pointArr[i][j] == 1
                    && this.getDistance(cc.v2(nodePos.x + this.rubNode.width / 2, nodePos.y + this.rubNode.height / 2), cc.v2(i * this.mapWidth, j * this.mapWidth)) <= cirLen) {
                    this.pointArr[i][j] = 0;
                }
            }
        }
        this.isFinishRub();
    };
    //刷新 圆形 遮罩
    private updateRubMask(mask: cc.Mask, touchPos: cc.Vec2) {
        // @ts-ignore
        let graphics = <cc.Graphics>mask._graphics;

        graphics.strokeColor = cc.color(0, 0, 0, 255);
        graphics.lineCap = cc.Graphics.LineCap.ROUND;
        if( this.fType == FormType.circle ){
            graphics.circle(touchPos.x, touchPos.y, this.maskLen);
        }else if( this.fType == FormType.cube ){
            graphics.rect(touchPos.x, touchPos.y, this.maskLen,this.maskHeight);
        }else if( this.fType == FormType.ellipse ){
            graphics.ellipse(touchPos.x, touchPos.y, this.maskLen,this.maskHeight);
        }

        graphics.stroke();
        graphics.fill();
    };
   
    /** 获取两个坐标之间的距离 */
    public getDistance(pos1: cc.Vec2, pos2: cc.Vec2): number {
        return pos1.sub(pos2).mag();
    };
}


